<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="企业名称">
        {{ form.enterpriseName }}
      </a-descriptions-item>
      <a-descriptions-item label="企业联系人">
        {{ form.enterprisePerson }}
      </a-descriptions-item>
      <a-descriptions-item label="企业联系方式">
        {{ form.enterpriseMobile }}
      </a-descriptions-item>
      <a-descriptions-item label="企业账号状态">
        <a-tag :color="form.status === 1 ? 'green' : 'red'">
          {{ form.status === 1 ? "正常" : "禁用" }}
        </a-tag>
      </a-descriptions-item>
    </a-descriptions>

    <!-- 图片展示区域 -->
    <div class="mt-4">
      <a-row :gutter="16">
        <!-- 营业执照 -->
        <a-col :span="8" class="mb-4">
          <a-card title="营业执照">
            <template #extra>
              <div class="flex items-center">
                <a-button
                    v-if="form.enterpriseBusinessLicense"
                    type="text"
                    @click="enterpriseBusinessLicenseVisiable = true"
                >
                  <icon-eye/>
                </a-button>
                <a-button
                    v-if="form.enterpriseBusinessLicense"
                    type="text"
                    @click="onDownLoad(form.enterpriseBusinessLicense)"
                >
                  <icon-download/>
                </a-button>
              </div>
            </template>
            <div class="image-container">
              <a-image
                  v-if="form.enterpriseBusinessLicenseUrl"
                  :preview-visible="enterpriseBusinessLicenseVisiable"
                  :src="form.enterpriseBusinessLicenseUrl"
                  @preview-visible-change="enterpriseBusinessLicenseVisiable = $event"
              />
              <div v-else class="empty-image-placeholder">
                <icon-file-image class="text-gray-300 text-2xl"/>
                <span class="text-gray-400 text-xs mt-2">暂无图片</span>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 税务登记证 -->
        <a-col :span="8" class="mb-4">
          <a-card title="税务登记证">
            <template #extra>
              <div class="flex items-center">
                <a-button
                    v-if="form.enterpriseTax"
                    type="text"
                    @click="enterpriseTaxVisiable = true"
                >
                  <icon-eye/>
                </a-button>
                <a-button
                    v-if="form.enterpriseTax"
                    type="text"
                    @click="onDownLoad(form.enterpriseTax)"
                >
                  <icon-download/>
                </a-button>
              </div>
            </template>
            <div class="image-container">
              <a-image
                  v-if="form.enterpriseTaxUrl"
                  :preview-visible="enterpriseTaxVisiable"
                  :src="form.enterpriseTaxUrl"
                  @preview-visible-change="enterpriseTaxVisiable = $event"
              />
              <div v-else class="empty-image-placeholder">
                <icon-file-image class="text-gray-300 text-2xl"/>
                <span class="text-gray-400 text-xs mt-2">暂无图片</span>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 组织机构代码证 -->
        <a-col :span="8" class="mb-4">
          <a-card title="组织机构代码证">
            <template #extra>
              <div class="flex items-center">
                <a-button
                    v-if="form.enterpriseCode"
                    type="text"
                    @click="enterpriseCodeVisiable = true"
                >
                  <icon-eye/>
                </a-button>
                <a-button
                    v-if="form.enterpriseCode"
                    type="text"
                    @click="onDownLoad(form.enterpriseCode)"
                >
                  <icon-download/>
                </a-button>
              </div>
            </template>
            <div class="image-container">
              <a-image
                  v-if="form.enterpriseCodeUrl"
                  :preview-visible="enterpriseCodeVisiable"
                  :src="form.enterpriseCodeUrl"
                  @preview-visible-change="enterpriseCodeVisiable = $event"
              />
              <div v-else class="empty-image-placeholder">
                <icon-file-image class="text-gray-300 text-2xl"/>
                <span class="text-gray-400 text-xs mt-2">暂无图片</span>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 法人身份证正面 -->
        <a-col :span="8" class="mb-4">
          <a-card title="法人身份证正面">
            <template #extra>
              <div class="flex items-center">
                <a-button
                    v-if="form.enterpriseIdcard1"
                    type="text"
                    @click="enterpriseIdcard1Visiable = true"
                >
                  <icon-eye/>
                </a-button>
                <a-button
                    v-if="form.enterpriseIdcard1"
                    type="text"
                    @click="onDownLoad(form.enterpriseIdcard1)"
                >
                  <icon-download/>
                </a-button>
              </div>
            </template>
            <div class="image-container">
              <a-image
                  v-if="form.enterpriseIdcard1Url"
                  :preview-visible="enterpriseIdcard1Visiable"
                  :src="form.enterpriseIdcard1Url"
                  @preview-visible-change="enterpriseIdcard1Visiable = $event"
              />
              <div v-else class="empty-image-placeholder">
                <icon-file-image class="text-gray-300 text-2xl"/>
                <span class="text-gray-400 text-xs mt-2">暂无图片</span>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 法人身份证反面 -->
        <a-col :span="8" class="mb-4">
          <a-card title="法人身份证反面">
            <template #extra>
              <div class="flex items-center">
                <a-button
                    v-if="form.enterpriseIdcard2"
                    type="text"
                    @click="enterpriseIdcard2Visiable = true"
                >
                  <icon-eye/>
                </a-button>
                <a-button
                    v-if="form.enterpriseIdcard2"
                    type="text"
                    @click="onDownLoad(form.enterpriseIdcard2)"
                >
                  <icon-download/>
                </a-button>
              </div>
            </template>
            <div class="image-container">
              <a-image
                  v-if="form.enterpriseIdcard2Url"
                  :preview-visible="enterpriseIdcard2Visiable"
                  :src="form.enterpriseIdcard2Url"
                  @preview-visible-change="enterpriseIdcard2Visiable = $event"
              />
              <div v-else class="empty-image-placeholder">
                <icon-file-image class="text-gray-300 text-2xl"/>
                <span class="text-gray-400 text-xs mt-2">暂无图片</span>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 授权委托书 -->
        <a-col :span="8" class="mb-4">
          <a-card title="授权委托书">
            <template #extra>
              <div class="flex items-center">
                <a-button
                    v-if="form.enterpriseAttorney"
                    type="text"
                    @click="enterpriseAttorneyVisiable = true"
                >
                  <icon-eye/>
                </a-button>
                <a-button
                    v-if="form.enterpriseAttorney"
                    type="text"
                    @click="onDownLoad(form.enterpriseAttorney)"
                >
                  <icon-download/>
                </a-button>
              </div>
            </template>
            <div class="image-container">
              <a-image
                  v-if="form.enterpriseAttorneyUrl"
                  :preview-visible="enterpriseAttorneyVisiable"
                  :src="form.enterpriseAttorneyUrl"
                  @preview-visible-change="enterpriseAttorneyVisiable = $event"
              />
              <div v-else class="empty-image-placeholder">
                <icon-file-image class="text-gray-300 text-2xl"/>
                <span class="text-gray-400 text-xs mt-2">暂无图片</span>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>
<script setup>
import {getCurrentInstance, reactive, ref, watch} from "vue";
import {getEnterpriseAccountByEnterpriseAccountIdApi} from "~/api/lindi/enterpriseAccount.js";
import {downloadFileApi} from "~/api/basic/file.js";

//全局实例
const {proxy} = getCurrentInstance();
//加载中...
const spinLoading = ref(false);
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {
    },
  },
});
//定义事件
const emit = defineEmits(["ok", "cancel"]);

//图片预览状态
const enterpriseBusinessLicenseVisiable = ref(false);
const enterpriseTaxVisiable = ref(false);
const enterpriseCodeVisiable = ref(false);
const enterpriseIdcard1Visiable = ref(false);
const enterpriseIdcard2Visiable = ref(false);
const enterpriseAttorneyVisiable = ref(false);

//表单
const form = reactive({
  //企业注册ID
  enterpriseAccountId: null,
  //企业名称
  enterpriseName: null,
  //企业联系人
  enterprisePerson: null,
  //企业联系方式
  enterpriseMobile: null,
  //账号状态 0-禁用 1-正常
  status: null,
  //营业执照
  enterpriseBusinessLicense: null,
  enterpriseBusinessLicenseUrl: null,
  //税务登记证
  enterpriseTax: null,
  enterpriseTaxUrl: null,
  //营业执照
  enterpriseCode: null,
  enterpriseCodeUrl: null,
  //企业法人身份证正面
  enterpriseIdcard1: null,
  enterpriseIdcard1Url: null,
  //企业法人身份证反面
  enterpriseIdcard2: null,
  enterpriseIdcard2Url: null,
  //授权委托书
  enterpriseAttorney: null,
  enterpriseAttorneyUrl: null,
});

//下载文件
const onDownLoad = (fileId) => {
  if (!fileId) {
    proxy.$msg.warning("文件不存在");
    return;
  }

  spinLoading.value = true;
  downloadFileApi(fileId)
      .then((response) => {
        // 创建Blob对象
        const blob = new Blob([response.data]);
        // 创建下载链接
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        // 获取文件名，如果响应头中有文件名则使用，否则使用默认名称
        const contentDisposition = response.headers["content-disposition"];
        let fileName = "下载文件";
        if (contentDisposition) {
          const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
          const matches = filenameRegex.exec(contentDisposition);
          if (matches != null && matches[1]) {
            fileName = decodeURIComponent(matches[1].replace(/['"]/g, ""));
          }
        }
        link.download = fileName;
        // 触发点击下载
        document.body.appendChild(link);
        link.click();
        // 清理
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
        proxy.$msg.success("文件下载成功");
      })
      .catch((error) => {
        console.error("文件下载失败:", error);
        proxy.$msg.error("文件下载失败");
      })
      .finally(() => {
        spinLoading.value = false;
      });
};

//加载企业注册详细信息
const loadEnterpriseAccountInfo = (enterpriseAccountId) => {
  spinLoading.value = true;
  getEnterpriseAccountByEnterpriseAccountIdApi(enterpriseAccountId)
      .then((res) => {
        //数据赋值
        if (res) {
          for (let key in res) {
            if (form.hasOwnProperty(key)) {
              form[key] = res[key];
            }
          }
        }
      })
      .finally(() => {
        spinLoading.value = false;
      });
};

//监听参数变化
watch(
    () => props.params,
    (newVal, oldVal) => {
      //企业注册ID
      if (props.params.enterpriseAccountId) {
        //加载企业注册详情
        loadEnterpriseAccountInfo(props.params.enterpriseAccountId);
      }
    },
    {deep: true, immediate: true}
);
</script>
<style scoped>
/* 树形组件点击会高亮，容易引起歧义，此处取消高亮样式 */
:deep(.arco-tree-node-selected .arco-tree-node-title, .arco-tree-node-selected
    .arco-tree-node-title:hover) {
  color: rgb(var(--color-text-1));
}

/* 图片容器样式 */
.image-container {
  @apply h-40 flex justify-center items-center;
}

/* 空图片占位符 */
.empty-image-placeholder {
  @apply w-full h-40 flex flex-col justify-center items-center border border-dashed border-[var(--color-border-2)] rounded bg-[var(--color-fill-1)];
}

/* 统一图片容器高度 */
:deep(.arco-image) {
  @apply h-40 overflow-hidden;
}

:deep(.arco-image-img) {
  @apply object-contain h-4/5;
}

/* 卡片样式调整 */
:deep(.arco-card-body) {
  @apply p-2;
}

:deep(.arco-card-header) {
  @apply pb-2;
}

/* 按钮样式优化 */
:deep(.arco-btn) {
  @apply transition-all duration-300;
}

:deep(.arco-btn-text) {
  @apply hover:bg-[var(--color-fill-2)] rounded-full w-8 h-8 flex items-center justify-center p-0 mx-1;
}

/* 卡片标题样式 */
:deep(.arco-card-header-title) {
  @apply text-[var(--color-text-1)] font-medium;
}
</style>
